<template>
  <view class="wrapper">
    <u-popup
      v-model="showPopup"
      mode="center"
      :closeable="true"
      :show-confirm-button="false"
      border-radius="20"
      :mask-custom-style="{ background: 'rgba(0, 0, 0, 0.7)' }"
    >
      <view class="popup-wrap">
        <view class="page-title">返货详情</view>
        <view class="cell-item">
          <view class="label">返回状态：</view>
          <view class="value">{{ orderReturnStatus.find(val => val.value === order.orderReturnStatus)?.label || '--' }}</view>
        </view>
        <view class="cell-item">
          <view class="label">骑手信息：</view>
          <view class="value">
            <text>{{ order.returnRiderName }}</text>
            <text class="m-l-20">{{ order.returnRiderPhone }}</text>
          </view>
        </view>
        <view class="cell-item flex-center" @click="handlePhone(order.returnRiderPhone)">
          <text class="iconfont">&#xe6bd;</text>
          <text class="m-l-10">联系骑手</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
/**
 * 返货单状
 */
const orderReturnStatus = [
  { label: '返货中', value: 7 },
  { label: '返货成功 ', value: 10 },
  { label: '返货失败', value: 15 }
]

export default {
  name: "index",
  props: {
    order: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      orderReturnStatus,
      showPopup: false
    }
  },
  methods: {
    show() {
      this.showPopup = true
    },
    handlePhone(phone) {
      if (!phone) return this.$toast('此订单信息不全，暂无法拨打电话')
      uni.makePhoneCall({
        phoneNumber: phone,
        success: () => {
          console.log("调用成功!")
        },
        fail: () => {
          console.log("调用失败!")
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.wrapper {

  .popup-wrap {
    padding: 24rpx 32rpx;
    width: 600rpx;

    .page-title {
      text-align: center;
      margin-bottom: 20rpx;
      font-size: 32rpx;
      font-weight: 500;
    }

    .cell-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 0;

      .label {
        color: #666;
      }
    }

    .flex-center {
      justify-content: center;

      .iconfont {
        font-size: 30rpx;
      }
    }
  }
}
</style>
